<template>
  <div class="knowledge-list">
    <!-- Header -->
    <header class="header">
      <div class="header-left">
        <h2>欢迎回来, {{ username }}</h2>
        <div class="sub-title">今天我们要使用哪个知识库？</div>
      </div>
      <div class="header-right">
        <el-input
          v-model="searchQuery"
          placeholder="搜索"
          :prefix-icon="Search"
          class="search-input"
        />
        <el-button type="primary" @click="handleCreateKnowledge">
          + 创建知识库
        </el-button>
      </div>
    </header>

    <!-- Main Content -->
    <div class="main-content">
      <div v-if="knowledgeBases.length === 0" class="empty-state">
        <el-empty description="暂无数据" />
      </div>
      <div v-else class="knowledge-grid">
        <div
          v-for="item in knowledgeBases"
          :key="item.id"
          class="knowledge-card"
          @click="handleCardClick(item)"
        >
          <div class="card-header">
            <el-avatar :size="32" class="avatar">
              <el-icon><User /></el-icon>
            </el-avatar>
            <div class="card-title">
              <h3>{{ item.name }}</h3>
              <div class="meta">
                <span>{{ item.fileCount }} 文档</span>
                <span class="date">{{ item.date }}</span>
              </div>
            </div>
            <el-dropdown trigger="click" @command="handleCommand($event, item)">
              <el-button type="text">
                <el-icon><MoreFilled /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="edit">编辑</el-dropdown-item>
                  <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>

    <!-- Create Knowledge Base Dialog -->
    <el-dialog
      v-model="showCreateDialog"
      title="创建知识库"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="createForm" label-width="80px">
        <el-form-item label="名称" required>
          <el-input v-model="createForm.name" placeholder="请输入名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCreateDialog = false">取消</el-button>
          <el-button type="primary" @click="handleCreate">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search, User, MoreFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const username = ref('qinzhenlong')
const searchQuery = ref('')
const showCreateDialog = ref(false)

const createForm = ref({
  name: ''
})

// Mock data
const knowledgeBases = ref([
  {
    id: 1,
    name: 'test',
    fileCount: 1,
    date: '16/04/2025 12:57:28'
  }
])

const handleCreateKnowledge = () => {
  showCreateDialog.value = true
}

const handleCreate = () => {
  // TODO: Implement create logic
  showCreateDialog.value = false
}

const handleCardClick = (item) => {
  router.push(`/knowledge/${item.id}`)
}

const handleCommand = (command, item) => {
  switch (command) {
    case 'edit':
      // TODO: Implement edit logic
      break
    case 'delete':
      // TODO: Implement delete logic
      break
  }
}
</script>

<style scoped lang="scss">
.knowledge-list {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--el-border-color-light);

  .header-left {
    h2 {
      margin: 0;
      font-size: 24px;
      margin-bottom: 8px;
    }

    .sub-title {
      color: var(--el-text-color-secondary);
    }
  }

  .header-right {
    display: flex;
    gap: 16px;
    align-items: center;

    .search-input {
      width: 300px;
    }
  }
}

.main-content {
  flex: 1;
  padding: 20px 40px;
  overflow-y: auto;
  background-color: var(--el-bg-color-page);
}

.empty-state {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.knowledge-card {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    .avatar {
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }

    .card-title {
      flex: 1;
      min-width: 0;

      h3 {
        margin: 0;
        font-size: 16px;
        line-height: 24px;
        color: var(--el-text-color-primary);
      }

      .meta {
        margin-top: 4px;
        font-size: 12px;
        color: var(--el-text-color-secondary);
        display: flex;
        gap: 16px;
      }
    }
  }
}
</style> 